<template>
    <div class="page-header">
        <div class="page-logo">
            <a href="/index.html">
                <img src="@assets/logo.png" alt="">
            </a>
        </div>
        <div class="nav">
            <a :href="item.link" class="nav-item" v-for="(item, index) in navList" :key="index"
               :class="index === pageIndex ? 'active' : ''">{{item.name}}</a>
        </div>
        
        <div class="search">
        
        </div>
        
        <template v-if="initOk">
            <div class="login" @click="handleClick" v-if="!isLogin">
                登录
            </div>
            <div v-else class="userInfo"  @mouseenter="mouseover" @mouseleave="mouseLeave">
                <img v-if="userLogo" class="user-logo" :src="userLogo" alt=""/>
                <img v-else class="user-logo" src="@assets/touxiang.png" alt=""/>
                <div class="user-tips">
                    <img src="@assets/whiteTips.png" alt="">
                </div>
                <div class="more" v-if="showMore" @mouseenter="mouseover" @mouseleave="mouseLeave">
                    <div class="name">{{nickName}}</div>
                    <div class="userId">{{cell}}</div>
                    <div class="my-article" @click="jumpPage(userId)"><img src="@assets/my-article.png" alt="">我的文章
                    </div>
                    <div class="layout" @click="layout"><img src="@assets/layout.png" alt="">退出登录</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "PageHeader",
        props: {
            pageIndex: {
                type: Number,
                default: 0
            }
        },
        created() {
            this.initInfo()
        },
        data() {
            return {
                navList: [
                    {name: '首页', link: '/index.html'},
                    {name: '社区精选', link: '/community.html'},
                    {name: '关于我们', link: '/about.html'}
                ],
                isLogin: false,
                userLogo: require('@assets/touxiang.png'),
                nickName: '',
                userId: '',
                cell: '',
                showMore: false,
                initOk: false
            }
        },
        methods: {
            handleClick() {
                this.$parent.handleClick()
            },
            mouseover() {
                this.showMore = true
            },
            mouseLeave() {
                this.showMore = false
            },
            jumpPage() {
                window.location.href = '/space.html'
            },
            initInfo() {
                this.$axios({actionName: 'my.info'}).then(res => {
                    if (res) {
                        let userInfo = res.data.userInfo
                        this.isLogin = true
                        this.userLogo = userInfo.userImgUrl
                        this.nickName = userInfo.nickName
                        this.cell = userInfo.cell
                        this.userId = userInfo.userId
                        this.initOk = true
                    }
                }).catch(err => {
                    this.initOk = true
                    this.isLogin = false
                })
            },
            layout() {
                this.$axios({actionName: 'loginout'}).then(res => {
                    window.location.reload()
                }).catch(err => {
                    window.location.reload()
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .page-header {
        position: relative;
        width: 1128px;
        margin: 0 auto;
        z-index: 999;
    }
    
    .page-logo {
        position: absolute;
        top: 12px;
        width: 98px;
        height: 48px;
        margin-right: 94px;
        cursor: pointer;
        
        img {
            display: inline-block;
            width: 100%;
            height: auto;
        }
    }
    
    .nav {
        display: inline-block;
        height: 70px;
        margin-left: 192px;
        
        .nav-item {
            position: relative;
            display: inline-block;
            margin-right: 100px;
            font-size: 16px;
            white-space: nowrap;
            line-height: 70px;
            color: #fff;
            opacity: .8;
            
            &:hover {
                opacity: 1;
            }
        }
        
        .active {
            opacity: 1;
            font-weight: bold;
        }
        
        .active:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            width: 32px;
            height: 2px;
            content: '';
            background-color: #FFDC20;
        }
    }
    
    .login {
        position: absolute;
        right: 0;
        top: 20px;
        width: 72px;
        height: 32px;
        border-radius: 4px;
        opacity: 0.8;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
    }
    
    .login:hover {
        opacity: 1;
    }
    
    .userInfo {
        position: absolute;
        right: 0;
        top: 20px;
        width: 64px;
        height: 42px;
        border-radius: 4px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        color: #FFFFFF;
        opacity: 1;
    
        .user-logo {
            display: block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-left: 27px;
        }
        
        .user-tips {
            position: absolute;
            bottom: 24px;
            right: 0;
            width: 8px;
            height: 8px;
            
            img{
                width: 100%;
            }
        }
        .more {
            position: absolute;
            top: 40px;
            right: 0;
            width: 140px;
            height: 139px;
            padding-top: 12px;
            opacity: 1;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 10px 0px rgba(112, 83, 6, 0.08);
            border-radius: 4px;
            
            .name {
                text-align: left;
                padding-left: 12px;
                height: 20px;
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                line-height: 20px;
            }
            
            .userId {
                opacity: .4;
                padding-left: 12px;
                text-align: left;
                font-size: 12px;
                height: 17px;
                margin-bottom: 9px;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                line-height: 17px;
            }
            
            .my-article {
                .flexed(fles-start);
                width: 140px;
                height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 40px;
                
                img {
                    width: 13px;
                    height: auto;
                    margin-right: 8px;
                    margin-left: 13px;
                }
                
                &:hover {
                    background: rgba(255, 220, 32, .4);
                }
            }
            
            .layout {
                .flexed(fles-start);
                width: 140px;
                height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 40px;
                
                img {
                    width: 13px;
                    height: auto;
                    margin-right: 8px;
                    margin-left: 13px;
                }
                
                &:hover {
                    background: rgba(255, 220, 32, .4);
                }
            }
        }
    }
</style>
